import React, { Component } from 'react';
/* 
     组件Wrapper 继承 App,是同一个this,有一样的状态和方法，可以重写render，显示不同的react元素
*/
class Index extends Component {
    state = {
        value1: '111'
    }
    alert () {
        window.alert()
    }
    render() {
        let {value1,value2} = this.state
        window.Index = this
        return (
            <div onClick={()=>{this.alert()}}>
                父组件
                <input value={value1} onChange={(e)=>{this.setState({value1:e.target.value})}} type="text" />
                <input value={value2} onChange={(e)=>{this.setState({value2:e.target.value})}} type="text" />
            </div>
        );
    }
}


export default AppWrapper2({})(Index);

function AppWrapper1(config = {}) {
    return function (App) {
        return class Wrapper extends App {
            constructor(props) {
                super(props);
            }
            // 组件Wrapper 继承 App,是同一个this,有一样的状态和方法，可以重写render，显示不同的react元素
            render () {
                return <div >重写父类的render{this.state.value1}</div>
            }
        };
    }
}
function AppWrapper2(config = {}) {
    return function (App) {
        return class Wrapper extends App {
            constructor(props) {
                super(props);

            }
            alert () {
                window.alert('AppWrapper2')
            }

        };
    }
}
